<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img :src="item.imageUrl" width="100%" alt="picture" />
      </van-swipe-item>
    </van-swipe>

    <div>
      <div class="reword">&nbsp;&nbsp;推荐歌单</div>
      <span 
      v-for="(item, index) in resongList" 
      :key="index"
      class="resong"
      @click="gosonglist(item.id)">
      <img :src="item.picUrl" width="105px" height="105px">
      <br>
      <span class="word">{{item.name}}</span>
      </span>
    </div>

    <div>
      <div class="reword">&nbsp;&nbsp;最新音乐</div>
      <div 
      v-for="(item, index) in newsongList" 
      :key="index"
      class="newsonglist">
        <span class="upword">
          <router-link :to="'/song/'+item.id">{{item.name}}</router-link>
          </span>
        <br>
        <i class="sq"></i>
        <span class="downword" v-for="(artist, index) in item.song.artists" 
      :key="'artist'+index">
        {{artist.name}}
        <!-- 歌手有多人时中间用/隔开 最后一个歌手不加 -->
          <span v-if="item.song.artists.length > 1 && index != item.song.artists.length-1">/</span>
            -&nbsp;{{item.name}}
        </span>
        <i class="lis"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图
      bannerList: [],
      // 推荐歌单
      resongList: [],
      // 最新音乐
      newsongList: []
    };
  },
  created() {
    // 获取轮播图
    // if(!localStorage.getItem('banner')){
    //   this.bannerList = JSON.parse(localStorage.getItem('banner'))
    // }else{
      this.getBanner();
    // }
  this.getResong();
  this.getNewsong();
  },
  methods: {
    getBanner() {
      this.$http("/banner")
        .then((res) => {
          this.bannerList = res.data.banners;
          // 保存到localStorage中 (快一些,但数据不会特别实时)
          // localStorage.setItem('banner', JSON.stringify(this.bannerList))
        })
        .catch((err) => {
          console.log(err);
        });
    },
  // 推荐歌单
  getResong(){
    this.$http('/personalized?limit=6')
    .then(res => {
      this.resongList = res.data.result;
    })
    .catch((err) => {
      console.log(err);
    })
  },
  // 最新音乐
  getNewsong(){
    this.$http('/personalized/newsong')
    .then(res => {
      this.newsongList = res.data.result;
    })
    .catch((err) => {
      console.log(err);
    })
  },
  // 跳转到歌单详情
  gosonglist(id){
    this.$router.push('/songlist/'+id);
  },
  },
};
</script>

<style>
.my-swipe .van-swipe-item {
  font-size: 20px;
  /* line-height: 90px; */
  text-align: center;
}
.reword{
  border-left: 1px solid #ff4b00;
  margin-bottom: 10px;
}
.resong{
  float: left;
  width: 105px;
  height: 150px;
  font-size: 14px;
  margin-left: 6px;
  margin-bottom: 10px;
}
.word{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.newsonglist{
  border-bottom: 1px solid #f4f4f4;
  padding-left: 10px;
  height: 60px;
  position: relative;
}
.upword{
    font-size: 16px;
    color: black;
}
.downword{
    font-size: 5px;
    color: grey;
}
.sq{
  display: inline-block;
  width: 14px;
  height: 10px;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: 0 0;
}
.lis{
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: -25px 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>